<script setup lang="ts">
import { ref } from 'vue'

// 定义组件属性
interface TreeNode {
  id: number
  name: string
  manager: string
  gender: string
  parentNode: string
  staffCount: string | number
  childrenNodes: TreeNode[]
}

interface Props {
  nodes: TreeNode[]
}

const props = defineProps<Props>()
const collapseActiveNames = ref<string[]>([])

// 定义事件
const emit = defineEmits<{
  (e: 'edit', node: TreeNode): void,
  (e: 'delete', nodeId: number): void
}>()

// 编辑节点
const editNode = (node: TreeNode) => {
  emit('edit', node)
}

// 删除节点
const deleteNode = (nodeId: number) => {
  emit('delete', nodeId)
}
</script>

<template>
  <van-collapse v-model="collapseActiveNames">
    <div v-for="node in props.nodes" :key="node.id">
      <van-collapse-item :title="node.name" :name="node.id.toString()">
        <van-cell-group :border="false">
          <van-cell title="负责人" :value="`${node.manager} (${node.gender})`" />
          <van-cell title="上级部门" :value="node.parentNode" />
          <van-cell title="编制人数" :value="`${node.staffCount}人`" />
          <van-cell center>
            <van-button class="edit-btn" size="small" plain type="primary" @click="editNode(node)">编辑</van-button>
            <van-button class="delete-btn" size="small" plain type="danger" @click="deleteNode(node.id)"
              style="margin-left: 10px;">删除</van-button>
          </van-cell>
        </van-cell-group>

        <div v-if="node.childrenNodes && node.childrenNodes.length > 0" style="padding-left: 5px;">
          <TreeDisplay :nodes="node.childrenNodes" @edit="editNode" @delete="deleteNode" />
        </div>
      </van-collapse-item>
    </div>
  </van-collapse>
</template>
<style scoped>
.edit-btn {}

.delete-btn {}
</style>